<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>MessageBox 消息弹框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<style type="text/css">
.diy-class{
	width: 600px;
}
.open3-diy{
	width: 600px;
}
</style>
<body>
<div id="app" class="">
	<el-divider content-position="left">消息提示</el-divider><!-- =============================================================== -->
	<p class="desc">当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。</p>
	<p class="desc">调用$alert方法即可打开消息提示， 它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。 此例中接收了两个参数，message和title。 值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。 若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。</p>
	<el-button @click="open1">单击以打开消息框1</el-button>
	
	<el-divider content-position="left">确认消息</el-divider><!-- =============================================================== -->
	<p class="desc">提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。</p>
	<p class="desc">调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。 Message Box 组件也拥有极高的定制性，我们可以传入 options 作为第三个参数，它是一个字面量对象。 type 字段表明消息类型，可以为success，error，info和 warning，无效的设置将会被忽略。 需要注意的是，第二个参数 title 必须定义为 String 类型，如果是 Object，会被当做为 options使用。 在这里我们返回了一个 Promise 来处理后续响应。</p>
	<el-button @click="open2">删除2</el-button>
	
	<el-divider content-position="left">提交内容</el-divider><!-- =============================================================== -->
	<p class="desc">当需要用户输入内容时，可以使用 Prompt 类型的消息框。</p>
	<p class="desc">调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。 可以用 inputPattern 字段自己规定匹配模式， 使用 inputValidator 来指定验证方法，它应该返回 Boolean 或 String。 返回 false 或 String 表示验证失败， 返回的字符串将用作 inputErrorMessage，用来提示用户错误原因。 此外，可以用 inputPlaceholder 字段来定义输入框的占位符。</p>
	<el-button @click="open3">你的邮箱3</el-button>
	<el-button @click="open3_1">你的邮箱3_1</el-button>
	<el-button @click="open3_2">4到6个字符</el-button>
	<el-button @click="open3_3">查看参数</el-button>
	
	<el-divider content-position="left">个性化设置你的弹框</el-divider><!-- =============================================================== -->
	<p class="desc">消息弹框可以被定制来展示各种内容。</p>
	<p class="desc">上面提到的三个方法都是对 $msgbox 方法的二次包装。 本例直接调用 $msgbox 方法，使用了 showCancelButton 字段，用于显示取消按钮。 另外可使用 cancelButtonClass 为其添加自定义样式，使用 cancelButtonText 来自定义取消按钮文本（Confirm 按钮也具有相同的字段，在文末的 API 说明中有完整的字段列表）。 此例还使用了 beforeClose 属性， 当 beforeClose 被赋值且被赋值为一个回调函数时，在消息弹框被关闭之前将会被调用，并且可以通过该方法来阻止弹框被关闭。 它是一个接收三个参数：action、instance 和done 的方法。 使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加 loading 状态等；此时若需要关闭实例，可以调用 done 方法（若在 beforeClose 中没有调用 done，则弹框便不会关闭）。</p>
	<el-button @click="open4">个性化4</el-button>
	
	<el-divider content-position="left">使用 HTML 片段</el-divider><!-- =============================================================== -->
	<p class="desc">message 支持传入 HTML 片段来作为展示内容。</p>
	<p class="desc">将 dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。</p>
	<el-button @click="open5">HTML片段5</el-button>
	
	<el-divider content-position="left">区分取消操作与关闭操作</el-divider><!-- =============================================================== -->
	<p class="desc">有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。</p>
	<p class="desc">默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和 callback 回调的参数均为 'cancel'。 如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。</p>
	<el-button @click="open6">区分取消和关闭6</el-button>
	
	<el-divider content-position="left">居中布局</el-divider><!-- =============================================================== -->
	<p class="desc">消息弹框支持使用居中布局。</p>
	<p class="desc">将 center 属性设置为 true 可将内容居中显示。</p>
	<el-button @click="open7">居中布局7</el-button>
	
	<el-divider content-position="left">可拖动</el-divider><!-- =============================================================== -->
	<p class="desc">MessageBox 允许拖放。</p>
	<p class="desc">设置draggable属性为true来拖拽弹窗</p>
	<el-button @click="open8">可拖动8</el-button>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		open1(){
			// ElementPlus.ElMessageBox.alert('This is a message0', 'Title0');
			this.$alert('这是一个提示消息：', 'Title1', {
				showCancelButton: true,
				confirmButtonText: 'OK1',//默认为OK
				cancelButtonText: '取消',
				callback: (action) => {
					console.log(action);
					// this.$message.success(`action: ${action}`);
					if(action == "confirm"){
						this.$message.success("你点击了确定。");
					}else if(action == "cancel"){
						this.$message.warning("你点击了X");
					}
				},
			});
		},
		open2(){
			this.$confirm("这将永久删除该文件，继续吗?", "警告：", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'diy-class', //MessageBox 的自定义类名
			}).then(()=>{
				this.$message.success("删除成功！");
			}).catch(()=>{
				this.$message.info("取消操作！");
			});
		},
		open3(){
			this.$prompt("请输入你的邮箱：", "录入邮箱", {
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel',
				inputPlaceholder: '必须输入一个邮箱！',
				inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
				inputErrorMessage: '请输入合法邮箱。',
				customClass: 'open3-diy',
			}).then(({value})=>{
				this.$message.success("你的邮箱是：" + value);
			}).catch(()=>{
				this.$message.info("你取消了输入。");
			})
		},
		open3_1(){
			this.$prompt("请输入你的邮箱：", "录入邮箱", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPlaceholder: '必须输入一个邮箱！',
				inputValue: "123456789@qq.com",
				inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
				inputErrorMessage: '请输入合法邮箱。',
			}).then(({value})=>{
				this.$message.success("你的邮箱是：" + value);
			}).catch(()=>{
				this.$message.info("你取消了输入。");
			})
		},
		open3_2(){
			this.$prompt("请输入4到6个字符：", "录入测试", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPlaceholder: '请输入。。。',
				inputValidator: function(str){
					let len = str.length;
					// console.log(len);
					if(len >= 4 && len <= 6){
						return true;
					}else{
						return "请输入4到6个字符。已输入的字符数为：" + len;
					}
				},
			}).then(({value})=>{
				this.$message.success("你输入的是：" + value);
			}).catch(()=>{
				this.$message.info("你取消了输入。");
			})
		},
		open3_3(){
			this.$prompt("去控制台查看一下参数：", "录入测试", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPlaceholder: '请输入。。。',
				inputValue: "test",
				inputValidator: function(str){
					let len = str.length;
					// console.log(len);
					if(len >= 4 && len <= 6){
						return true;
					}else{
						return "请输入4到6个字符。已输入的字符数为：" + len;
					}
				},
			}).then((value)=>{
				this.$message.success("你输入的是：" + value);
				console.log(value);
			}).catch((value)=>{
				this.$message.info("你取消了输入。");
				console.log(value);
			})
		},
		strVerify(str){
			console.log(str);
			console.log("输入了aa");
			if(str == 'aa'){
				return "输入了aa";
			}else{
				return "输入了aa";
				// return true;
			}
		},
		
		open4(){
			this.$msgbox({
				title: 'Message',
				message: Vue.h('p', null, [
					Vue.h('span', null, 'Message can be '),
					Vue.h('i', { style: 'color: teal' }, 'VNode'),
				]),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				beforeClose: (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true
						instance.confirmButtonText = 'Loading...'
						setTimeout(() => {
							instance.confirmButtonLoading = false
							instance.confirmButtonText = 'OK了'
							setTimeout(() => {
								done()
							}, 300)
						}, 2000)
					} else {
						done()
					}
				},
			}).then((action)=>{
				this.$message.success("action的值：" + action);
			}).catch(()=>{
				this.$message.info("你点击了取消或关闭窗口。");
			})
		},
		open5(){
			this.$alert(
				'<strong>proxy is <i>HTML</i> string</strong><h1>h1标签</h1>',
				'HTML String',
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: 'OK1',
					callback: (action) => {
						console.log(action);
						// this.$message.success(`action: ${action}`);
						if(action == "confirm"){
							this.$message.success("你点击了确定。");
						}else if(action == "cancel"){
							this.$message.warning("你点击了X");
						}
					},
				}
			);
		},
		open6(){
			this.$confirm('This is a message6', 'Title6', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				callback: (action) => {
					console.log(action);
					// this.$message.success(`action: ${action}`);
					if(action == "confirm"){
						this.$message.success("你点击了确定。");
					}else if(action == "cancel"){
						this.$message.warning("你点击了取消");
					}else if(action == "close"){
						this.$message.warning("你点击了X");
					}
				},
			});
		},
		open7(){
			this.$confirm('This is a message7', 'Title7', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
				// callback: (action) => {
				// 	console.log(action);
				// 	if(action == "confirm"){
				// 		this.$message.success("你点击了确定。");
				// 	}else if(action == "cancel"){
				// 		this.$message.warning("你点击了取消");
				// 	}
				// },
			}).then((action)=>{
				this.$message.success("action的值：" + action);
			}).catch((action)=>{
				this.$message.info("你点击了取消或关闭窗口。" + action);
			})
		},
		open8(){
			this.$confirm('This is a message8', 'Title8', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
				draggable: true,
			}).then((action)=>{
				this.$message.success("action的值：" + action);
			}).catch((action)=>{
				this.$message.info("你点击了取消或关闭窗口。" + action);
			})
		},
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>